import React from 'react';
import { Link } from 'react-router-dom';
import { RepoContributorsModel } from 'store/models';

import Text, { TEXT_VIEW } from 'components/Text';
import { classnames } from 'utils';

import classes from './Contributors.module.scss';

export type ContributorInterface = {
    login: string;
    id: number;
    avatar_url: string;
    html_url: string;
};

export type ContributorsProps = {
    ownerLogin: string;
    repoName: string;
    contributors: RepoContributorsModel[];
};

const cnContributors = classnames(classes, 'contributors');

const Contributors: React.FC<ContributorsProps> = React.memo(({ ownerLogin, repoName, contributors }) => {
    return (
        <div className={cnContributors()}>
            <Link
                to={`https://github.com/${ownerLogin}/${repoName}/graphs/contributors`}
                target="_blank"
                rel="noopener noreferrer"
                className={cnContributors('title')}
            >
                <Text view={TEXT_VIEW.p18} className={cnContributors('text')}>
                    Contributors
                </Text>
                <div className={cnContributors('count')}>{contributors.length}</div>
            </Link>
            <div className={cnContributors('people')}>
                {contributors.map((contributor) => (
                    <Link
                        key={contributor.id}
                        to={contributor.htmlUrl}
                        target="_blank"
                        rel="noopener noreferrer"
                        className={cnContributors('line')}
                    >
                        <img alt={contributor.login} src={contributor.avatarUrl} className={cnContributors('avatar')} />
                        <Text view={TEXT_VIEW.p16} className={cnContributors('text')}>
                            {contributor.login}
                        </Text>
                    </Link>
                ))}
            </div>
        </div>
    );
});

export default Contributors;
